<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑视频</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="/static/video_css/font.css">
    <link rel="stylesheet" href="/static/video_css/xadmin.css">
    <link rel="stylesheet" href="/static/video_css/frame.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <style type="text/css">
        .order_select select{
            height: 30px;
            width: 90%;
        }
        #demoList{
        	position: fixed;
        	bottom: 0;
        	width: 100%;
        }
    </style>
    
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
</head>
<body class="form-wrap">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">编辑视频</div>
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form">
                    <div class="layui-form-item" style="width: 50%">
                        <label class="layui-form-label">视频：</label>

                        <div class="fup_files">
                            <input type="file" class="files" name="video" onchange="fuploads($(this))">点击上传
                        </div>

                        <video src="{$info.video}" name="video" width="45%" controls="controls" style="display: block;margin-left: 110px;margin-top: 3px">
                            您的浏览器不支持 video 标签。
                        </video>
                    </div>

                    <div class="layui-form-item" style="width:43%">
                        <label class="layui-form-label">标题：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="required" value="{$info.title}" placeholder="请输入标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text" style="width:43%">
                        <label class="layui-form-label">介绍内容</label>
                        <div class="layui-input-block">
                          <textarea name="content" placeholder="请输入内容" class="layui-textarea">{$info.content}</textarea>
                        </div>
                    </div>

                    <div class="layui-input-block">
                        <button class="layui-btn" id="upstart" type="button" style="margin-left: 30px">立即提交</button>
                        <a href="javascript:history.back(-1)" class="layui-btn layui-btn-primary">返回</a>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div id="demoList"></div>
<script>
	var fileList = "";

	function fuploads(f){
    	fileList = f[0].files;
        var nameAll = f[0].files[0].type;
        var name = nameAll.split("/");
        
        if(name[0] != 'video'){
            layer.msg('上传类型错误', {icon: 2});
        }else{
            var url = window.URL.createObjectURL(f[0].files[0]);  // 得到bolb对象路径，可当成普通的文件路径一样使用

            f.parent().next("video").css('display','block');
            f.parent().next("video").attr('src',url);
        }

        var filecontent = "";

        for( var i = 0 ; i < fileList.length ; i++ ){  
            filecontent += '<div class="layui-progress layui-progress-big" lay-filter="'+fileList[i].lastModified+'_'+i+'" lay-showPercent="true" lay-filter="progress_'+i+'">'+
                    '<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"><span id="text">0%</span></div>'+
                '</div>' 
        }
        $("#demoList").append(filecontent);
    }

    //---------------
    var upstartBtn = document.getElementById('upstart');
    //---------------
    const LENGTH = 512 * 1024 * 2;
    var start = 0;
    var end = start + LENGTH;
    var blob;
    var blob_num = 1;
    var is_stop = 0
    var file = null;
    var loading;
    //-----------------------------
    var upload_instance = new Upload();
 
    var fileid = 0;
    upstartBtn.onclick = function(){
    	if(fileList == ''){
    		layer.msg('* 视频不能为空',{icon:2,time:2000});
    	}else if($('input[name="title"]').val() == ''){
    		layer.msg('* 标题不能为空',{icon:2,time:2000});
    	}else if($('textarea[name="content"]').val() == ''){
    		layer.msg('* 内容不能为空',{icon:2,time:2000});
    	}

        for( var i = 0 ; i < fileList.length ; i++ ){ 
            fileid = fileList[i].lastModified+'_'+i;
            upload_instance.addFileAndSend(fileList[i]);
        }
        return false;
    }
 
    function Upload(){
        //对外方法，传入文件对象
        this.addFileAndSend = function(that){
            // loading
            loading = layer.load(0, {
            	shade: [0.5,'gray'],
            }); 
 
            file = that;
            blob = cutFile(file);
            sendData(blob, file);
            blob_num += 1;
        }

        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start, end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        };

        //发送文件
        function sendData(blob, file){
            var form_data = new FormData();
            var total_blob_num = Math.ceil(file.size / LENGTH);
            form_data.append('file', blob);
            form_data.append('blob_num', blob_num);
            form_data.append('total_blob_num', total_blob_num);
            form_data.append('file_name', file.name);
            console.log(blob_num);
            console.log(total_blob_num);

            $.ajax({
                url:'{:url("AboutUs/video_adds")}',
                type:'post',
                async:true,
                dataType:"json",
                data:form_data,
                contentType:false,
                processData:false,
                success:function(data){
                    console.log(data);
                    if(data['code'] == 1){
                        // 进度条和状态设置
                        if (total_blob_num == 1) {
                            progress = '100%';
                        }else{
                            progress = (Math.min(100, (blob_num / total_blob_num) * 100)).toFixed(2) + '%';
                        }
 
                        // 进度条
                        layui.element.progress(fileid, progress);
 
                        // 状态
                        var type = document.getElementById('text');
                        type.innerText = progress;
                        // console.log('progress-----' + progress);
 
                        //继续上传
                        if (start < file.size && is_stop === 0) {
                            blob = cutFile(file);
                            sendData(blob, file);
                            blob_num += 1;
                        }

                        //每次清空
                        form_data = "";
                    }else if(data['code'] == 2){
                        // 进度条
                        progress = '100%';
                        layui.element.progress(fileid, progress);
 
                        // loading end 
                        layer.close(loading);

                        var formData = new FormData();
				        var title = $('input[name="title"]').val();
				        var content = $('textarea[name="content"]').val();

				        formData.append('title', title);
				        formData.append('content', content);
				        formData.append('video', data.file_path);
				        
				        $.ajax({
				            url:'{:url("AboutUs/about_us_data")}',
				            data:formData,
				            contentType: false,  // 必须false才会自动加上正确的Content-Type
				            processData: false,
				            type:"post",
				            dataType:'json',
				            success:function(msg){
				                if(msg.code == 0){
                                    window.location.reload()
				                }else{
				                    layer.msg(msg.msg, {icon: 2});
				                }
				            },
				            error:function(msg){
				                layer.msg(msg.msg, {icon: 2});
				            }
				        })
                    }
            	},error:function(data){
	                // loading end 
	                layer.close(loading);
	 
	                layer.msg('* 未知错误',{icon:2,time:2000});
	                return;
	            }
       		})
    	}
	}
</script>
</body>
</html>